import React from 'react';
import {View,Text} from 'react-native';
import SearchToolBar from "./index";
import {px} from "../../utils/ScreenUtil";

export default class SearchDemo extends React.Component{

  /**
   * 排序方式列表
   * @type {Array}
   */
  sortList = [
    {label: '默认排序', value: '05'},
    {label: '其他从高到低', value: '02'},
    {label: '其他从低到高', value: '01'},
    {label: '从高到低', value: '04'},
    {label: '从低到高', value: '03'},
    {label: '从多到少', value: '06'},
    {label: '从少到多', value: '07'},
  ]

  /**
   * 筛选条件列表
   * @type {Array}
   */
  filterList = [
    {label: '全部', value: ''},
    {label: '已实名', value: '02'},
    {label: '未实名', value: '01'},
    {label: '沉默中', value: '04'},
    {label: '已注销', value: '03'},
    {label: '审核中', value: '05'},
  ]

  /**
   * 选择排序方式
   * @param  {Object} sortOption 选中的排序方式
   * @return {void}
   */
  selectedSort = sortOption => {
    alert(sortOption.value)
  }

  /**
   * 选择筛选条件
   * @param  {Object} filterOption 选中的筛选条件
   * @return {void}
   */
  selectedFilter = filterOption => {
    alert(filterOption.value)
  }

  /**
   * 搜索栏工具组件
   * @return {Array<ReactComponent>}  组件数组
   */
  renderSearchTool = () => {
    return ([
      <SearchToolBar.Select
        style={{marginLeft: px(20)}}
        options={this.sortList}
        onSelect={this.selectedSort}
      />,
      <SearchToolBar.MultiSelect
        style={{marginLeft: px(50)}}
        options={this.filterList}
        onSelect={this.selectedFilter}
      />
    ]);
  }


  render(){
    return(
      <SearchToolBar
        returnRef={ref => this._searchToolRef = ref}
        justifyContent="flex-start"
        content={this.renderSearchTool()}
      >
        <View style={{height:400,width:375,alignItems: 'center',justifyContent:'center'}}>
          <Text>内部的children</Text>
        </View>
      </SearchToolBar>
    )
  }
}